import React, { Component, lazy, Suspense } from 'react'
import { NavLink, Route, Routes } from 'react-router-dom'
import Loading from './Loading'
// import About from './About'

const Home = lazy(() => import('./Home'))
const About = lazy(() => import('./About'))

export default class Demo extends Component {
    render() {
        return (
            <div>
                <div>
                    <NavLink to={'/home'}>Home</NavLink>
                    <NavLink to={'/about'}>About</NavLink>
                </div>
                <div>
                    <Suspense fallback={<Loading />}>
                        <Routes>
                            <Route path='/home' element={<Home />}></Route>
                            <Route path='/about' element={<About />}></Route>
                        </Routes>
                    </Suspense>
                </div>
            </div>
        )
    }
}
